<template>
  <div>
    <my-form-drawer :title="title" :width="1500" :visible="visible" @ok="onClose" @cancel="onClose">
      <a-layout>
        <a-layout-sider width="700" style="background-color: rgb(235,245,244)">
          <a-row>
            <a-col :span="50">
              <div>
                <video :src="form.auditFilePath" controls width="700px" height="500px" v-if="showType==='video'"></video>
                <audio :src="form.auditFilePath" controls v-if="showType==='audio'" style="width: 700px;"></audio>
              </div>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <div style="font-family: 黑体,serif">
                <textarea v-model="form.verifyVo.text" style="width: 700px;height: 350px;border: none"></textarea>
              </div>
            </a-col>
          </a-row>
        </a-layout-sider>
        <a-layout>
          <a-layout-content style="background-color: rgb(235,245,244)">
            <div style="padding: 10px">
              <h2>检测建议</h2>
              <div v-if="showType==='video'"><a-tag v-for="(item1,index) in form.auditReasonList" :key="index" class="tag-red">{{ item1 }}</a-tag></div>
            </div>
            <div style="padding: 10px">
              <h2 v-if="showType==='video'">文字检测情况: </h2>
              <div style="overflow-y: scroll;height: 300px;">
                <div style="width: 680px;margin: 10px;padding: 10px;;background-color: white" v-for="(item,index) in form.verifyVo.errorTextList" :key="index">
                  <a-button style="float: right" type="primary">{{ item.level === '1'?'错误': item.level === '2'?'疑错':'严重错误'}}</a-button>
                  <h2>{{index+1 + '.词组: ' + item.errWord}}</h2>
                  <a-space style="float: right;position: relative">
                    <a-button type="primary" class="tag-green">修改</a-button>
                    <a-button type="primary" class="tag-green">恢复</a-button>
                  </a-space>
                  <h2 v-for="(item2,index2) in item.corWord" :key="index2" style="padding-left: 30px">建议: {{ item2 }}</h2>
                </div>
<!--                <a-card :title="'词组: ' + item.errWord" style="width: 680px" v-for="(item,index) in form.verifyVo.errorTextList" :key="index">-->
<!--                  <a-tag slot="extra" color="#108ee9">错误</a-tag>-->
<!--                  <h1 v-for="(item2,index2) in item.corWord" :key="index2">建议: {{ item2 }}</h1>-->
<!--                </a-card>-->
<!--                <br/>-->
              </div>
            </div>
            <div style="padding: 10px" v-if="showType==='video'">
              <h2>图像检测情况: </h2>
              <div style="padding-top: 10px;overflow-y: scroll;height: 400px" v-if="showType==='video'">
                <a-row :gutter="0">
                  <a-col :span="8" v-for="(item,index) in form.verifyVo.imgInfoList" :key="index">
                    <a-card :bordered="false">
                      <img alt="example" :src="item.imgPath" width="200px">
                      <a-tag class="tag-red" style="position: relative;left: 68px;bottom: -10px;">{{ item.tag }}</a-tag>
                    </a-card>
                  </a-col>
                </a-row>
              </div>
            </div>
          </a-layout-content>
        </a-layout>
      </a-layout>
    </my-form-drawer>
  </div>
</template>

<script>
import moment from 'moment';
import MyFormDrawer from '@/components/drawer/MyFormDrawer';
import {rule} from "@/utils/validateRules"

export default {
  name: 'VerifyForm',
  components: {MyFormDrawer},
  data() {
    return {
      showType: '',
      textTotal: 0,
      textCurrent: 1,
      imgTotal: 0,
      imgCurrent: 1,
      type: '0', //0添加，1编辑
      title: '',
      form: {},
      visible: false,
      rules: {
        word: [{required: true, message: '敏感词不能为空', trigger: 'change'},
          {validator: rule.checkSpace, message: '敏感词不能为空', trigger: 'blur'},
        ],
      },
      page: {
        currentPage: 1,
        pageSize: 10,
      },
    };
  },
  computed: {},
  created() {

  },
  methods: {
    moment,
    initData() {
      this.form = {
        word: '',
        wordType: '',
        sensitiveType: 'WHITE',
      };
    },

    changeForm(state, action, data,showType) {
      if (showType === undefined || showType=== ''){
        console.log('showType不能为u空')
        return
      }
      this.showType = showType
      this.visible = state;
      this.type = action;
      this.title = '编辑图片检测'
      if (this.type) {
        this.form = Object.assign(this.form, data);
        console.log(this.form);
      }
    },
    onClose() {
      this.visible = false;
      this.$refs['form'].clearValidate();
      this.initData();
    },
  },
};
</script>

<style>
#components-layout-demo-basic {
  text-align: center;
}
#components-layout-demo-basic .ant-layout-header,
#components-layout-demo-basic .ant-layout-footer {
  background: #ffffff;
  color: #fff;
}
#components-layout-demo-basic .ant-layout-footer {
  line-height: 1.5;
}
#components-layout-demo-basic .ant-layout-sider {
  background: #ffffff;
  color: #fff;
  line-height: 120px;
  border-inline-width: 300px;
}
#components-layout-demo-basic .ant-layout-content {
  background: rgb(255, 255, 255);
  color: #fff;
  min-height: 120px;
  line-height: 120px;
}
#components-layout-demo-basic > .ant-layout {
  margin-bottom: 48px;
}
#components-layout-demo-basic > .ant-layout:last-child {
  margin: 0;
}
</style>
